<template>
	<view class="container">
		<custom-navbar title="共同建站" :showBack="true"></custom-navbar>
		
		<view class="main-content" :style="{paddingTop: navbarTotalHeight + 'px'}">
			<view class="form-container">
				<!-- 网站名称 -->
				<view class="form-group">
					<text class="form-label">网站名称 <text class="required">*</text></text>
					<input 
						class="form-input" 
						placeholder="请输入网站名称" 
						v-model="siteData.name" 
						maxlength="30"
					/>
					<text class="char-count">{{siteData.name.length}}/30</text>
				</view>
				
				<!-- 网站地址 -->
				<view class="form-group">
					<text class="form-label">网站地址 <text class="required">*</text></text>
					<input 
						class="form-input" 
						placeholder="请输入网站地址（如：https://example.com）" 
						v-model="siteData.url" 
						type="url"
					/>
					<text class="tip-text">请输入完整的网址，包含 http:// 或 https://</text>
				</view>
				
				<!-- 网站图标 -->
				<view class="form-group">
					<text class="form-label">网站图标</text>
					<view class="icon-section">
						<view class="icon-preview" v-if="siteData.icon">
							<image class="site-icon" :src="siteData.icon" mode="aspectFit"></image>
							<view class="delete-icon" @tap="removeIcon">
								<image class="delete-icon-img" src="https://img.icons8.com/ios-filled/50/delete-sign.png" mode="aspectFit"></image>
							</view>
						</view>
						
						<view class="add-icon" @tap="chooseIcon" v-if="!siteData.icon">
							<image class="add-icon-img" src="https://img.icons8.com/ios/50/plus.png" mode="aspectFit"></image>
							<text class="add-text">添加图标</text>
						</view>
					</view>
					<text class="tip-text">建议上传正方形图标，尺寸不小于64x64像素</text>
				</view>
				
				<!-- 网站简介 -->
				<view class="form-group">
					<text class="form-label">网站简介</text>
					<textarea 
						class="content-input" 
						placeholder="简单介绍一下这个网站..." 
						v-model="siteData.description"
						maxlength="200"
						auto-height
					></textarea>
					<text class="char-count">{{siteData.description.length}}/200</text>
				</view>
				
				<!-- 分类选择 -->
				<view class="form-group">
					<text class="form-label">网站分类</text>
					<view class="category-grid">
						<view 
							class="category-item" 
							v-for="(category, index) in categories" 
							:key="index"
							:class="{active: siteData.category === category.value}"
							@tap="selectCategory(category.value)"
						>
							<image class="category-icon" :src="category.icon" mode="aspectFit"></image>
							<text class="category-text">{{category.name}}</text>
						</view>
					</view>
				</view>
				
				<!-- 提交设置 -->
				<view class="form-group">
					<text class="form-label">提交设置</text>
					<view class="option-item">
						<text class="option-text">公开显示</text>
						<switch class="option-switch" :checked="siteData.isPublic" @change="togglePublic"/>
					</view>
					<view class="option-item">
						<text class="option-text">接受评价</text>
						<switch class="option-switch" :checked="siteData.allowRating" @change="toggleRating"/>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部提交按钮 -->
		<view class="submit-container" :style="{paddingBottom: safeAreaBottom + 'px'}">
			<view class="submit-btn" @tap="submitSite" :class="{disabled: !canSubmit}">
				<text class="submit-text">提交网站</text>
			</view>
		</view>
	</view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue';

export default {
	components: {
		CustomNavbar
	},
	data() {
		return {
			navbarTotalHeight: 132,
			statusBarHeight: 44,
			safeAreaBottom: 0,
			siteData: {
				name: '',
				url: '',
				icon: '',
				description: '',
				category: '',
				isPublic: true,
				allowRating: true
			},
			categories: [
                	{ name: '影视',value: 'movie', icon: 'https://img.icons8.com/fluency/48/movie-projector.png' },
				{ name: '二次元',value: 'anime', icon: 'https://img.icons8.com/fluency/48/anime.png' },
				{ name: '音乐',value: 'music', icon: 'https://img.icons8.com/fluency/48/music.png' },
				{ name: '阅读',value: 'reading', icon: 'https://img.icons8.com/fluency/48/book.png' },
				{ name: '游戏',value: 'game', icon: 'https://img.icons8.com/fluency/48/controller.png' },
				{ name: '娱乐',value: 'entertainment', icon: 'https://img.icons8.com/fluency/48/party-baloons.png' },
				{ name: '工具箱',value: 'toolbox', icon: 'https://img.icons8.com/fluency/48/toolbox.png' },
				{ name: '省钱助手',value: 'save', icon: 'https://img.icons8.com/fluency/48/money-bag.png' },
			
			]
		}
	},
	computed: {
		canSubmit() {
			return this.siteData.name.trim().length > 0 && 
				   this.siteData.url.trim().length > 0 && 
				   this.isValidUrl(this.siteData.url);
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 44;
		this.navbarTotalHeight = this.statusBarHeight + 44;
		this.safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
	},
	methods: {
		// 验证URL格式
		isValidUrl(url) {
			try {
				const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
				return urlPattern.test(url) && (url.startsWith('http://') || url.startsWith('https://'));
			} catch (e) {
				return false;
			}
		},
		
		// 选择图标
		chooseIcon() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.siteData.icon = res.tempFilePaths[0];
				}
			});
		},
		
		// 删除图标
		removeIcon() {
			this.siteData.icon = '';
		},
		
		// 选择分类
		selectCategory(value) {
			this.siteData.category = value;
		},
		
		// 切换公开设置
		togglePublic(e) {
			this.siteData.isPublic = e.detail.value;
		},
		
		// 切换评价设置
		toggleRating(e) {
			this.siteData.allowRating = e.detail.value;
		},
		
		// 提交网站
		submitSite() {
			if (!this.canSubmit) {
				if (!this.siteData.name.trim()) {
					uni.showToast({
						title: '请输入网站名称',
						icon: 'none'
					});
					return;
				}
				
				if (!this.siteData.url.trim()) {
					uni.showToast({
						title: '请输入网站地址',
						icon: 'none'
					});
					return;
				}
				
				if (!this.isValidUrl(this.siteData.url)) {
					uni.showToast({
						title: '请输入正确的网站地址',
						icon: 'none'
					});
					return;
				}
			}
			
			uni.showLoading({
				title: '提交中...'
			});
			
			// 模拟提交请求
			setTimeout(() => {
				uni.hideLoading();
				
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}, 2000);
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.main-content {
	padding: 20rpx;
}

.form-container {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.form-group {
	margin-bottom: 40rpx;
}

.form-group:last-child {
	margin-bottom: 0;
}

.form-label {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
}

.required {
	color: #ff4757;
}

.form-input {
		width: 100%;
	min-height: 80rpx;
	padding: 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
	line-height: 1.5;
}

.form-input:focus {
	border-color: #667eea;
}

.content-input {
	width: 100%;
	min-height: 200rpx;
	padding: 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
	line-height: 1.5;
}

.content-input:focus {
	border-color: #667eea;
}

.char-count {
	display: block;
	text-align: right;
	font-size: 22rpx;
	color: #999;
	margin-top: 10rpx;
}

.tip-text {
	display: block;
	font-size: 22rpx;
	color: #999;
	margin-top: 10rpx;
}

/* 图标选择 */
.icon-section {
	margin-bottom: 15rpx;
}

.icon-preview {
	position: relative;
	width: 120rpx;
	height: 120rpx;
	display: inline-block;
}

.site-icon {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
	border: 2rpx solid #e0e0e0;
}

.delete-icon {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 30rpx;
	height: 30rpx;
	background: #ff4757;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.delete-icon-img {
	width: 18rpx;
	height: 18rpx;
}

.add-icon {
	width: 120rpx;
	height: 120rpx;
	border: 2rpx dashed #ccc;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f8f9fa;
}

.add-icon-img {
	width: 40rpx;
	height: 40rpx;
	margin-bottom: 10rpx;
	opacity: 0.6;
}

.add-text {
	font-size: 22rpx;
	color: #666;
}

/* 分类选择 */
.category-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	margin-bottom: 15rpx;
}

.category-item {
	flex: 1;
	min-width: 100rpx;
	max-width: 150rpx;
	padding: 20rpx 15rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #ffffff;
	transition: all 0.3s ease;
}

.category-item.active {
	border-color: #667eea;
	background: #f0f7ff;
}

.category-icon {
	width: 36rpx;
	height: 36rpx;
	margin-bottom: 8rpx;
}

.category-text {
	font-size: 22rpx;
	color: #333;
	text-align: center;
}

.category-item.active .category-text {
	color: #667eea;
	font-weight: bold;
}

/* 提交选项 */
.option-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.option-item:last-child {
	border-bottom: none;
}

.option-text {
	font-size: 28rpx;
	color: #333;
}

.option-switch {
	transform: scale(0.8);
}

/* 底部提交按钮 */
.submit-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	padding: 20rpx;
	border-top: 1rpx solid #e5e5e5;
	z-index: 1000;
}

.submit-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50rpx;
	padding: 30rpx;
	text-align: center;
	box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
}

.submit-btn.disabled {
	background: #ccc;
	opacity: 0.6;
	box-shadow: none;
}

.submit-text {
	font-size: 32rpx;
	color: #ffffff;
	font-weight: bold;
}
</style>